<template>
  <div class="login">
    <img class="logo" src="https://iaaa.pku.edu.cn/iaaa/resources/images/pku_logo_red.png">
    <div class="main flex">
      <img class="poster" src="@/assets/img/login/login1.png">
      <div>
        <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
          <el-form-item>
            <div class="flex loginMethods">
              <p :class="{loginMethodsAct:index===currentIndex}" v-for="(item,index) in loginMethods" :key="'loginMethods'+index" href="#"
                  @click="onLoginMethodsClick(index)">{{ item }}</p>
            </div>
          </el-form-item>
          <div v-show="currentIndex===0">
            <el-form-item>
              <el-input placeholder="学号/职工号/北大邮箱/手机号" clearable v-model="formLabelAlign.name">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input placeholder="密码" clearable v-model="formLabelAlign.region">
                <a href="#" class="forgetPW" slot="suffix">
                  忘记密码
                </a>
              </el-input>
            </el-form-item>
            <el-form-item>
              <div class="remember">记住账号</div>
            </el-form-item>
            <el-form-item>
              <button>登录</button>
            </el-form-item>
          </div>
          <div v-show="currentIndex===1">
            <el-form-item>
              <div class="methods2 textAlignCenter">
                使用 <a href="#">"北京大学"APP</a>扫码进入
                <img class="margin0Auto" src="@/assets/img/login/ewm.png">
              </div>
            </el-form-item>
          </div>

        </el-form>
<!--        <el-tabs :stretch="stretch" v-model="activeName">-->
<!--          <el-tab-pane label="账号登录" name="first">用户管理</el-tab-pane>-->
<!--          <el-tab-pane label="扫码登录" name="second">配置管理</el-tab-pane>-->
<!--        </el-tabs>-->
      </div>

    </div>
    <div class="bottom">
      <ul class="flex flex-center">
        <li>服务热线：010-62751023</li>
        <li>Email：<a href="#">its@pku.edu.cn</a></li>
        <li>© <a href="#">北京大学计算中心</a></li>
      </ul>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import {Form} from 'element-ui'
import {FormItem} from 'element-ui'
import {Input} from 'element-ui'
import {Tabs} from 'element-ui'
import {TabPane} from 'element-ui'

Vue.use(Tabs)
Vue.use(TabPane)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)

export default {
  name: "login",
  data() {
    return {
      labelPosition: 'right',
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      },
      activeName: 'first',
      stretch:true,
      loginMethods:["账号登录","扫码登录"],
      currentIndex:0
    }
  },
  methods:{
    onLoginMethodsClick(index){
      this.currentIndex=index;
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  width: 750px;
  margin: 0 auto;
  .logo {
    width: 250px;
    height: 70px;
    margin: 50px 0;
  }
  .main {
    margin-top: 80px;
    height: 300px;
    .poster {
      width: 400px;
      height: 260px;
    }

    .loginMethods{
      border-bottom: 1px solid #eeeeee;
      .loginMethodsAct{
        color: #9B0000;
      }
      p{
        font-size: 18px;
        text-align: center;
        width: 50%;
      }
      p:hover{
        color: #9B0000;
        cursor:pointer;
      }
    }
    .placeholder{
      color: #777777;
    }
    a:visited{
      color: #000;
    }
    a:hover{
      color: #9B0000;
    }
    .forgetPW{
      color: #000;
      font-size: 16px;
    }
    .remember{
      line-height: 0;
    }
    button{
      height: 40px;
      width: 250px;
      background-color: #9B0000;
      color: #fff;
      font-size: 16px;
      border-radius: 2px;
    }
    .methods2{
      width: 250px;
      color: #777;
      img{
        height: 150px;
        width: 150px;
      }
      a:visited{
        color: #777;
      }
      a:hover{
        color: #9B0000;
      }
    }
  }
  .bottom{
    margin-top: 100px;
    li{
      margin: 0 15px;
      font-size: 15px;
      color: #544C4A;
      a:visited{
        color: #544C4A;
      }
      a:hover{
        color: #9B0000;
      }
    }
  }
}
.el-input{
  width: 250px;
}
/deep/ .el-input__inner:focus{
  border-color: #9B0000;
}
/deep/ .el-input__inner:hover{
  border-color: #9B0000;
}
/deep/ .is-active {
  color: #9B0000;
}
/deep/ .el-tabs__item{
  font-size: 18px;
}
/deep/ .el-tabs__active-bar{
  height: 0;
}

</style>